<template>
  <div class="service-search-wrapper">
    <portal-header />
    <div class="search-section w-100">
      <div class="w-content d-flex flex-ai-c">
        <input v-model="searchForm.keyword" type="text" placeholder="请输入关键字查询，如：单位名称" class="c-999 fs-16">
        <div class="search-button" @click="getSearchList"><img :src="searchImg"></div>
      </div>
    </div>
    <div class="service-section w-content d-flex flex-jc-sb">
      <div class="service-content">
        <div class="search-form fs-16">
          <div class="search-form-item d-flex">
            <div class="label c-999">通用分类</div>
            <div class="value">
              <div class="d-flex flex-ai-c flex-start flex-wrap">
                <div class="value-item" @click="selectParentCategory(defaultAll)">
                  <div
                    class="value-content d-flex flex-ai-c flex-jc-c"
                    :class="{ 'active': defaultAll.id === searchForm.categoryParentId }"
                  >全部
                  </div>
                </div>
                <div
                  v-for="(item, index) in parentCategoryList"
                  :key="'category' + index"
                  class="value-item"
                  @click="selectParentCategory(item)"
                >
                  <div
                    class="value-content d-flex flex-ai-c flex-jc-c"
                    :class="{ 'active': item.id === searchForm.categoryParentId }"
                  >{{ item.displayName }}
                  </div>
                </div>
              </div>
              <div class="d-flex flex-ai-c flex-start flex-wrap">
                <div
                  v-for="(item, index) in categoryList"
                  :key="'category' + index"
                  class="value-item"
                  @click="selectCategory(item)"
                >
                  <div
                    class="value-content d-flex flex-ai-c flex-jc-c"
                    :class="{ 'active': item.id === searchForm.categoryId }"
                  >{{ item.displayName }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="search-form-item d-flex">
            <div class="label c-999">所属区域</div>
            <div class="value">
              <div class="d-flex flex-ai-c flex-start flex-wrap">
                <div class="value-item" @click="selectArea(defaultAll)">
                  <div
                    class="value-content d-flex flex-ai-c flex-jc-c"
                    :class="{ 'active': defaultAll.id === searchForm.areaCode }"
                  >全部
                  </div>
                </div>
                <div
                  v-for="(item, index) in areaList"
                  :key="'area' + index"
                  class="value-item"
                  @click="selectArea(item)"
                >
                  <div
                    class="value-content d-flex flex-ai-c flex-jc-c"
                    :class="{ 'active': item.id === searchForm.areaCode }"
                  >{{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="result-content">
          <div class="sort-section d-flex flex-start flex-ai-c">
            <div
              v-for="(item, index) in sortByList"
              :key="'sort' + index"
              class="sort-item fs-16"
              @click="selectSort(item)"
            >
              <div class="sort-content d-flex flex-ai-c flex-jc-c" :class="{ 'active': item.id === searchForm.sortBy }">
                {{ item.label }}
              </div>
            </div>
          </div>
          <div class="result-list">
            <div v-for="(data, index) in list" :key="'data' + index" class="result-item d-flex flex-jc-sb flex-ai-c">
              <div class="pass" />
              <div class="item-logo"><img :src="imgUrl + data.imgList[0]"></div>
              <div class="item-content fs-16">
                <div class="d-flex flex-ai-c">
                  <img class="rz" :src="rzImg">
                  <div class="name fw-700" :title="data.name">{{ data.name }}</div>
                </div>
                <div class="d-flex flex-jc-sb flex-ai-c">
                  <div class="w-50 d-flex flex-start flex-ai-c">
                    <div class="label c-999">联系人:</div>
                    <div class="value">{{ data.contactPerson }}</div>
                  </div>
                  <div class="w-50 d-flex flex-end flex-ai-c">
                    <div class="label c-999">成立时间:</div>
                    <div class="value">{{ data.foundDate }}</div>
                  </div>
                </div>
                <div class="d-flex flex-jc-sb flex-ai-c">
                  <div class="w-100 d-flex flex-start flex-ai-c">
                    <div class="label c-999">企业名称:</div>
                    <div class="value">{{ data.companyName }}</div>
                  </div>
                </div>
                <div class="d-flex flex-start flex-ai-c">
                  <div class="label c-999">商户地址:</div>
                  <div class="address w-70">{{ data.address }}</div>
                  <img class="address-img" :src="addressImg">
                </div>
              </div>
              <div class="item-button-section d-flex flex-column flex-ai-c fs-16">
                <div class="item-button w-100 d-flex flex-ai-c flex-jc-c" @click="sysLogin">点击查看</div>
              </div>
            </div>
          </div>
          <div class="page-nav-wrap">
            <protal-pagination
              v-show="total>0"
              :page-sizes="[5]"
              :total="total"
              :layout="layout"
              :page.sync="searchForm.page"
              :limit.sync="searchForm.limit"
              @pagination="getSearchList"
            />
          </div>
        </div>
      </div>
      <div class="tip-section">
        <div class="tip-title c-white fw-700 fs-24">温馨提示</div>
        <div class="tip-content fs-16" />
      </div>
    </div>
    <el-dialog
      title="扫码进入小程序"
      :visible.sync="dialogQrCodeVisiable"
      width="400px"
      @close="dialogQrCodeVisiable = false"
    >
      <div style="width: 300px;margin: 0 auto">
        <div style="width: 300px">
          <img :src="qrCodeImg" alt="">
        </div>
        <!--        <div style="width: 300px; text-align: center">扫一扫进入微信小程序</div>-->
      </div>
    </el-dialog>
    <portal-footer />
  </div>
</template>

<script>
import PortalHeader from './components/PortalHeader'
import PortalFooter from './components/PortalFooter'
import ProtalPagination from './components/Pagination'
import { adminDivisionListByParentId } from '@/api/rest/division'
import { search, serviceCategory } from '@/api/rest/portal/portal'
import { DEFALT_CITY_CODE } from '@/utils/constant'

export default {
  name: 'ServiceSearch',
  components: {
    PortalHeader,
    PortalFooter,
    ProtalPagination
  },
  data() {
    return {
      qrCodeImg: require('@/assets/portal_images/qr_code.png'),
      imgUrl: process.env.VUE_APP_BASE_API + '/api/portal/viewImage/',
      dialogQrCodeVisiable: false,
      searchForm: {
        keyword: null,
        categoryId: null,
        categoryParentId: 0,
        areaCode: 0,
        page: 1,
        limit: 5,
        sortFields: 'updatedTime|DESC',
        sortBy: 0
      },
      total: 0,
      defaultAll: {
        id: 0,
        name: '全部',
        children: []
      },
      areaList: [],
      parentCategoryList: [],
      categoryList: [],
      sortByList: [
        { id: 0, label: '默认排序' },
        { id: 1, label: '评分最高' },
        { id: 2, label: '服务次数最多' }
      ],
      list: [],
      listQuery: {
        page: 1,
        limit: 5
      },
      cityCode: DEFALT_CITY_CODE,
      layout: 'total, prev, pager, next',
      passImg: require('@/assets/portal_images/search/pass.png'),
      addressImg: require('@/assets/portal_images/search/address.png'),
      rzImg: require('@/assets/portal_images/search/rz.png'),
      searchImg: require('@/assets/portal_images/search/search.png'),
      shopLogoImg: require('@/assets/portal_images/temp/shop_logo.png')
    }
  },
  watch: {
    $route(to, from) {
      const keyword = this.$route.query.keyword
      if (keyword) {
        this.searchForm.keyword = keyword
      }
      this.getSearchList()
    }
  },
  created() {
    const keyword = this.$route.query.keyword
    if (keyword) {
      this.searchForm.keyword = keyword
    }
    this.getServiceCategory()
    this.getAreaList()
    this.getSearchList()
  },
  methods: {
    getSearchList() {
      // if (this.searchForm.keyword === null || this.searchForm.keyword === '') {
      //   this.$message({
      //     message: '请输入关键字',
      //     type: 'warning'
      //   })
      //   return
      // }
      search(this.searchForm)
        .then(response => {
          this.list = response.data.items
          this.total = response.data.total
        })
    },
    getServiceCategory() {
      serviceCategory()
        .then(response => {
          this.parentCategoryList = []
          response.data.forEach((item, index) => {
            this.parentCategoryList.push(item)
          })
        })
    },
    getAreaList() {
      adminDivisionListByParentId(this.cityCode)
        .then(response => {
          this.areaList = []
          response.data.forEach(item => {
            this.areaList.push({ id: item.id, name: item.areaName })
          })
        })
    },
    selectParentCategory(item) {
      this.searchForm.categoryParentId = item.id
      this.categoryList = []
      item.children.forEach(item => {
        this.categoryList.push(item)
      })
      if (item.id === 0) {
        this.searchForm.categoryId = null
        this.getSearchList()
      }
    },
    selectCategory(item) {
      this.searchForm.categoryId = item.id
      this.getSearchList()
    },
    selectArea(item) {
      this.searchForm.areaCode = item.id
      this.getSearchList()
    },
    selectSort(item) {
      this.searchForm.sortBy = item.id
      switch (item.id) {
        case 0:
          this.searchForm.sortFields = 'updatedTime|DESC'
          break
        case 1:
          this.searchForm.sortFields = 'creditScore|DESC'
          break
        case 2:
          this.searchForm.sortFields = 'orderNum|DESC'
          break
      }
      this.getSearchList()
    },
    sysLogin() {
      this.dialogQrCodeVisiable = true
      // portalUtil.gotoPage(this, '/login', null)
    }
  }
}
</script>
<style lang="scss">
@import '~@/styles/portal/common.scss';
</style>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.service-search-wrapper {
  background: #F9FAFC;

  .search-section {
    height: 72px;
    background: #fff;
    background-image: url('~@/assets/portal_images/search/search_bg.png');

    input {
      height: 40px;
      border: 1px solid $portalBlueColor;
      width: 786px;
      padding-left: 6px
    }

    .search-button {
      width: 40px;
      height: 40px;
      background: $portalBlueColor;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    img {
      width: 24px;
      height: 24px;
    }
  }

  .service-section {
    height: 100%;
    margin-bottom: 64px;

    .service-content {
      width: 820px;

      .search-form {
        background-color: $portalWhiteColor;
        line-height: 40px;

        .search-form-item {
          padding: 20px 32px;
          border-bottom: 1px dashed #E5E5E5;

          .label {
            width: 80px;
          }

          .value {
            width: calc(100% - 80px);

            .value-item {
              cursor: pointer;
              padding: 0 24px;
            }
          }

          .active {
            color: $portalBlueColor;
            border-bottom: 1px solid $portalBlueColor;
          }
        }
      }

      .result-content {
        margin-top: 24px;
        background-color: $portalWhiteColor;

        .sort-section {
          height: 70px;
          line-height: 70px;
          color: #222222;
          border-bottom: 1px dashed #E5E5E5;

          .sort-item {
            .sort-content {
              cursor: pointer;
              padding: 0 24px;
            }

            .active {
              color: $portalBlueColor;
            }
          }
        }

        .result-item {
          position: relative;
          padding: 24px;
          border-bottom: 1px dashed #E5E5E5;

          &:hover {
            background-color: #F9FAFC;
          }

          .pass {
            position: absolute;
            width: 91px;
            height: 91px;
            top: 0;
            right: 0;
            background-image: url('~@/assets/portal_images/search/pass.png');
          }

          .item-logo {
            height: 146px;
            width: 146px;

            img {
              width: 138px;
              height: 138px;
              border-radius: 5px;
            }
          }

          .item-content {
            border-right: 1px dashed #E5E5E5;
            width: 500px;
            padding: 0 12px;
            line-height: 40px;

            .rz {
              width: 50px;
              height: 21px;
            }

            .name {
              margin-left: 6px;
              width: 90%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
            }

            .value {
              padding-left: 12px;
              white-space: nowrap; //禁止换行
              overflow: hidden;
              text-overflow: ellipsis; //...
            }

            .address-img {
              margin-left: 12px;
              width: 20px;
              height: 20px;
            }

            .address {
              margin-left: 12px;
              white-space: nowrap; //禁止换行
              overflow: hidden;
              text-overflow: ellipsis; //...
            }
          }

          .item-button-section {
            width: 130px;
            padding-top: 40px;

            .item-button {
              width: 115px;
              height: 40px;
              background: $portalWhiteColor;
              border-radius: 4px;
              color: $portalBlueColor;
              border: 1px solid $portalBlueColor;
              margin-top: 16px;
              cursor: pointer;
            }
          }
        }
      }
    }

    .tip-section {
      width: 350px;
      height: 568px;
      padding: 12px 16px;
      background-image: url('~@/assets/portal_images/search/tip_bg.png');

      .tip-title {

      }

      .tip-content {
        margin-top: 30px;
        line-height: 32px;
        color: #222222;

        p {
          text-indent: 30px;
        }
      }
    }
  }

  .page-nav-wrap {
    text-align: center;
    padding: 40px 0;
  }

  .breadcrumb-wrapper {
    height: 67px;
  }

  .breadcrumb-wrapper a:hover {
    color: #5f8abf;
  }

  .breadcrumb-wrapper .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
  }

  .breadcrumb-wrapper .breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
    text-transform: capitalize;
    margin-right: 4px;
  }

  .breadcrumb-wrapper .breadcrumb .breadcrumb-item a:hover {
    color: #1f425d;
  }

  .breadcrumb-wrapper .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    font-family: "Font Awesome 5 Pro";
    color: #D6D8D8;
    font-size: 14px;
  }
}
</style>
